// 求购的信息详情页面
<template>
  <div class="purchaseDetails">
    <nav-login></nav-login>
    <home-seach></home-seach>
    <goods-nav :navindex="navindex"></goods-nav>

    <div class="w1200">
      <p class="title">
        <router-link to="/" tag="span" style="cursor: pointer;"> 首页 </router-link>  > 
        <router-link to="/purchaseCenter" tag="span" style="cursor: pointer;"> 求购中心 </router-link> > 
        查看详情
      </p>
      <div class="content">
        <div class="content-left">
          <h4>
            {{PurchaseInformation1.brand_name}}
            {{PurchaseInformation1.goods_name}}
            {{PurchaseInformation1.specification}}
          </h4>
          <ul>
            <li>
              <b>求购单号：</b>
              <bdi>{{PurchaseInformation1.single_num}}</bdi>
              <i>{{titles.status}}</i>
            </li>
            <li>
              <b>发布日期：</b>
              <bdi>{{PurchaseInformation1.create_at}}</bdi>
            </li>
            <li>
              <b>手机号码：</b>
              <bdi>{{ PurchaseInformation1.phone}}</bdi>
            </li>
            <li>
              <b>联系人：</b>
              <bdi>{{PurchaseInformation1.name}}</bdi>
              <!-- <span>立即注册登陆即可查看详情</span> -->
            </li>
            <li>
              <b>单位名称：</b>
              <bdi>{{PurchaseInformation1.name}}</bdi>
            </li>
            <li>
              <b>产品型号：</b>
              <bdi>{{PurchaseInformation1.specification}}</bdi>
            </li>
            <li>
              <b>品牌：</b>
              <bdi>{{PurchaseInformation1.brand_name}}</bdi>
            </li>
            <li>
              <b>求购数量：</b>
              <bdi>{{PurchaseInformation1.goods_number}}</bdi>
            </li>
            <li>
              <b>最低单价要求(元)：</b>
              <bdi>{{PurchaseInformation1.lowest_price}}</bdi>
            </li>
            <li>
              <b>报价截止日期：</b>
              <bdi>{{PurchaseInformation1.end_time}}</bdi>
            </li>
            <li>
              <b>详细介绍：</b>
              <bdi>{{PurchaseInformation1.buying_desc}}</bdi>
            </li>

            <!-- <li v-for="(item,key) in contentli" :key="key">
                            <b> {{ item.title }}</b>
                            <em>{{ item.contentText }} </em>
                            <span v-show = " item.spanShow "> {{ item.spanShow }}</span>
            </li>-->
          </ul>
          <!-- swiper -->
          <!-- 在没有提交我有货的时候 整个轮播图不显示 -->
          <div class="banner">
            <swiper :options="swiperOption">
              <div class="parallax-bg" slot="parallax-bg" data-swiper-parallax="-7%"></div>
              <!--视差-->
              <swiper-slide v-for="(page,index) in pages" :key="index">
                <div class="swiperk">
                  <ol v-for="(item,index) in page" :key="index">
                    <li>
                      <b>{{item.name}}</b>
                      <span>{{item.phone}}</span>
                      <i>{{item.create_at}}</i>
                    </li>
                    <li>
                      <span>{{item.desc}}</span>
                      <em>【已审核】</em>
                    </li>
                  </ol>

                  <!-- <ol>
                                        <li>
                                            <b>杨先生</b>
                                            <span>18********32</span>
                                            <i>2018-09-10 15:23:30</i>
                                        </li>
                                        <li>
                                            <span>我仓库正好有50现货，型号匹配，价格优惠，详情电联。我仓库正好有50现货，型号匹配，价格优惠，详情电联。我仓库正好有50现货，型号匹配，价格优惠，</span>
                                            <em>【已审核】</em>
                                        </li>
                  </ol>-->
                </div>
              </swiper-slide>

              <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
          </div>
          <!-- 在没有提交我有货的时候 整个轮播图不显示 -->
          <el-tabs v-model="activeName">
            <el-tab-pane label="我有货" name="first">
              <div class="w600">
                <el-form
                  :model="ruleForm"
                  :rules="rules"
                  ref="ruleForm"
                  label-width="100px"
                  class="demo-ruleForm"
                  size="small"
                >
                  <!-- <el-form-item label="姓名：" prop="name">
                                        <el-input v-model="ruleForm.name"></el-input>
                                    </el-form-item>

                                    <el-form-item label="手机号码：" prop="tel">
                                        <el-input v-model="ruleForm.tel" onchange = "value=value.replace(/[^\d]/g,'')"></el-input>
                  </el-form-item>-->
                  <el-form-item label="详细描述：" prop="desc">
                    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
                  </el-form-item>

                  <el-form-item>
                    <el-button
                      type="primary"
                      @click="submitForm('ruleForm')"
                      :disabled="disabled"
                    >立即发布</el-button>
                  </el-form-item>
                  <p>
                    <i>*</i>温馨提示：请您填写真实的手机号码，以便我们客服人员为您提供专属服务，望理解！
                  </p>
                </el-form>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <selectionof-goods></selectionof-goods>
      </div>
    </div>

    <bottom-nav></bottom-nav>
    <home-footer></home-footer>

  </div>
</template>
<script>
import selectionofGoods from "../productDetails/components/Selectionofgoods" //  精选商品
import { mapState } from "vuex"
export default {
  name: "purchaseDetails",

  data() {
    return {
      banner: [],
      disabled: false,
      PurchaseInformation:{}, // 求购信息的 data 对应接口
      swiperOption: {
        speed: 600,
        parallax: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      },

      ruleForm: {
        // name: '',
        // tel:'',
        desc: ""
      },

      rules: {
        // name: [
        //     { required: true, message: '请填写您的姓名', trigger: 'blur' },
        // ],
        // tel:[

        //     { required: true, message: '请填写您的电话号码', trigger: 'blur' },
        //     { min: 11, max: 11, message: '长度11个字符', trigger: 'blur' }

        // ],
        desc: [{ required: true, message: "请填写描述信息", trigger: "blur" }]
      },

      activeName: "first",
      swiperOption: {
        pagination: {
          el: ".swiper-pagination"
        }
      },
      navindex: 4,
      titles: {
        name: "求购单号",
        orderNum: "20180907000001",
        status: "状态：未过期"
      },
      contentli: [
        {
          title: "发布日期",
          contentText: "2018-09-07"
        },
        {
          title: "手机号码",
          contentText: "180****5454"
        },
        {
          title: "联系人",
          contentText: "张三",
          // spanShow: "立即注册登陆即可查看详情"
        },
        {
          title: "单位名称",
          contentText: "单位名称"
        },
        {
          title: "产品型号",
          contentText: "180****5454"
        },
        {
          title: "品牌",
          contentText: "张三"
        },
        {
          title: "求购数量",
          contentText: "单位名称"
        },
        {
          title: "最低单价要求(元)",
          contentText: "张三"
        },
        {
          title: "报价截止日期",
          contentText: "单位名称"
        },
        {
          title: "详细介绍",
          contentText:
            "求购现货控制阀，客户买来做备件的，您看下报给含税价。货期要求60天内，谢谢*******"
        }
      ]
    }
  },

  components: {
    selectionofGoods
  },
  computed: {
    pages() {
      if(this.banner.length){
        const pages = [];
        this.banner.forEach((item, index) => {
          const page = Math.floor(index / 2)
          if (!pages[page]) {
            pages[page] = []
          }
          pages[page].push(item)
        })
        return pages
      }
    },

    ...mapState({
      PurchaseInformation1: state => state.PurchaseInformation
    })
  },

  methods: {
    // 数据初始化     求购详情接口
    async dataInit() {
      let id = this.$route.params.id
      if (id) {
        const contentli = await this.$http({
          method: "post",
          url: "/api/index/web/getBuyingDetail",
          data: {
            id
          }
        })
        let _data = contentli.data
        console.log(_data)
        if (_data.State.Code == 200) {
          this.PurchaseInformation = _data.data
          // 电话星号显示
          let _phone = [...this.PurchaseInformation.phone] // 字符串转换成数组
          for (let i = 3; i <= 6; i++) {
            _phone[i] = "*"
          }
          let myPhone = _phone.join("") // 装换成字符串

          this.PurchaseInformation.phone = myPhone
          this.$store.commit("PurchaseInformation", this.PurchaseInformation)
        }

        // 获取评论信息
        const getBuyingComment = await this.$http({
          method: "post",
          url: "/api/index/web/getBuyingComment",
          data: {
            id
          }
        });
        console.log(getBuyingComment)
        if (getBuyingComment.data.State.Code == 200) {
          const comment = getBuyingComment.data.data
          // 电话号码遮挡 开始
          comment.forEach(ele => {
            let _phone = [...ele.phone] // 字符串转换成数组
            for (let i = 3; i <= 6; i++) {
              _phone[i] = "*"
            }
            let myPhone = _phone.join("") // 转换成字符串
            ele.phone = myPhone
          })
          // 电话号码遮挡 结束
          this.$store.commit("comment", comment)
          this.banner = this.$store.state.comment
        }
      }
    },

    // 发布求购评论 接口
    // name	是	string	姓名
    // phone	是	string	手机号
    // desc	否	text	评论内容
    // user_id	否	string	会员号
    // buying_list_id	否	bigint	评论对呀的求购信息id
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const myForm = this.ruleForm
          let [user_id, buying_list_id, single_num, desc] = [
            this.$store.state.UserInfor.user_id,
            Number(this.$route.params.id),
            this.$store.state.PurchaseInformation.single_num,
            myForm.desc
          ]
          console.log(user_id, buying_list_id, single_num, desc)
          if (user_id) {
            this.$http({
              method: "post",
              url: "/api/index/web/buyingComment",
              data: {
                user_id,
                buying_list_id,
                single_num,
                desc
              }
            })
              .then(res => {
                if (res.data.State.Code == 200) {
                  console.log(res)
                  this.$notify({
                    title: "成功",
                    message: "发布成功 等待后台审核......",
                    type: "success"
                  })
                  this.disabled = true
                }
              })
              .catch(err => {
                console.log(err)
              })
          } else {
            this.$router.push("/")
          }
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },

    // resetForm(formName) {
    //     this.$refs[formName].resetFields();
    // },

    bannerInit() {
      this.banner = this.$store.state.comment //轮播图上面的信息初始化
    }
  },

  created() {
    this.dataInit()
    this.bannerInit() // 滚轮初始化 轮播图上面的信息初始化
  }
}
</script>
<style lang="scss" scoped>
.purchaseDetails {
  .w1200 {
    width: 1200px;
    margin: auto;
    p {
      line-height: 46px;
    }
    .content {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .content-left {
        width: 946px;

        .title {
          padding: 0 10px;
          font-size: 14px;
          color: #3a3a3a;
          line-height: 14px;
          margin-top: 25px;
          border-left: 3px solid #a2a2a2;
        }
        h4 {
          line-height: 48px;
          letter-spacing: 0.4px;
        }
        ul {
          border-top: 1px solid #ebebeb;
          border-left: 1px solid #ebebeb;
          li {
            line-height: 46px;
            border-bottom: 1px solid #ebebeb;
            border-right: 1px solid #ebebeb;
            display: flex;
            flex-direction: row;
            position: relative;
            align-items: center;
            &:first-child {
              background: #ececec;
              bdi {
                color: #ff7800;
                font-weight: bold;
                font-size: 16px;
              }
              i {
                position: absolute;
                right: 30px;
                top: 0px;
                margin-right: 30px;
                font-size: 12px;
              }
            }
            b {
              padding-left: 20px;
              width: 180px;
              font-size: 14px;
            }
            em {
              color: #2f2f2f;
              width: 560px;
            }
            span {
              position: absolute;
              right: 30px;
              top: 0px;
              font-size: 12px;
              color: #8f8f8f;
            }
          }
        }

        .banner {
          width: 100%;
          height: 303px;
          margin-top: 30px;
          // 视差
          .parallax-bg {
            position: absolute;
            left: 0;
            top: 0;
            width: 130%;
            height: 100%;
            -webkit-background-size: cover;
            background-size: cover;
            background-position: center;
            background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538787025&di=ad51a454a5859b24efed742fb8c74bc5&imgtype=jpg&er=1&src=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2Fqk%2Fback_origin_pic%2F00%2F02%2F07%2F2dedc747d6ad3a06885b129630ef6850.jpg");
          }
          // background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538787025&di=ad51a454a5859b24efed742fb8c74bc5&imgtype=jpg&er=1&src=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2Fqk%2Fback_origin_pic%2F00%2F02%2F07%2F2dedc747d6ad3a06885b129630ef6850.jpg');
          // background-size: 100% 100%;
          .swiper-pagination {
            /deep/ .swiper-pagination-bullet {
              width: 12px;
              height: 12px;
            }
            /deep/ .swiper-pagination-bullet-active {
              opacity: 1;
              background: #ff7800;
            }
          }
          .swiperk {
            width: 905px;
            height: 263px;
            padding: 20px;
            ol {
              width: 656px;
              margin-left: 220px;
              margin-top: 15px;
              padding: 10px 20px;
              background-color: rgba($color: #ffffff, $alpha: 0.8);
              border-radius: 5px;
              li {
                line-height: 20px;
                b {
                  line-height: 40px;
                }
                i {
                  float: right;
                  font-size: 12px;
                  color: #a2a2a2;
                }
                em {
                  color: #ff7800;
                  font-weight: bold;
                  float: right;
                }
              }
            }
          }
        }
        .el-tabs {
          margin-top: 20px;
          /deep/ #tab-first {
            // font-size: 24px;
            color: #000;
            font-weight: bold;
          }
          .w600 {
            width: 600px;
            // margin: auto;
            /deep/ .el-button {
              margin-left: 160px;
              letter-spacing: 1.5px;
              font-weight: bold;
              font-size: 15px;
            }
            p {
              font-size: 12px;
              color: #a2a2a2;
              text-align: center;
              i {
                color: #ff0000;
              }
            }
          }
        }
      }
    }
  }
}
</style>


